<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>上传</title>
	<style>
.fileBtn{
	position: relative;
	/* display: inline-block; */
	display: none;
	background: #409EFF;
	border: 1px solid #409EFF;
	border-radius: 4px;
	padding: 5px 12px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
	cursor: pointer;
	width: 30rem;
    height: 6rem;
}
.fileBtn input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
.fileBtn:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
	cursor: pointer;
}	
.okBtn{
	width: 32rem;
    height: 6rem;
	background: coral;
    font-size: 3rem;
}
	</style>
</head>
<body>
<form  method="post" id="frm" action="/" enctype="multipart/form-data">
	<div class="fileBtn">
		<!-- capture="camcorder" -->
		<input type="file" id="filebtn"  accept="image/*"  name="photo"></input>
	</div>
	<div>
			<input class="okBtn" id="callcommel" type="button" value="拍照"></input>
	</div>
	<hr>
	<div>
			<input class="okBtn"  type="submit" value="提交"></input>
	</div>
	<script>
	const callcommel = document.getElementById("callcommel")
	const filebtn = document.getElementById("filebtn")
	const frm = document.getElementById("frm")
	
	callcommel.onclick=function(){
		filebtn.click();
	}

	frm.onsubmit=function(){
		alert("提交成功")
	}
	</script>
</form>
</body>
</html>